<template>
  <basic-dialog
    :title="dialogTitle"
    width="60%"
    okText="确定"
    footerBtnPosition="center"
    :visible="dialogVisible"
    :handleClose="handleClose"
    :handleOk="handleOk"
  >
    <BasicTable
      ref="basicTable"
      :showSelectCol="false"
      :showPagination="false"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :tableHeight="480"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/BasicTable';
import { getQualificationTypeName } from '@/utils/getUtils';
export default {
  components: {
    BasicDialog,
    BasicTable
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    dataSource: {
      type: Array,
      default () { return []; }
    },
    relType: { // 资质类型， 1是商品类型，2是分类类型
      type: String,
      default: ''
    },
    dialogTitle: { // 弹框标题
      type: String
    }
  },
  data () {
    return {
      radio: '',
      dialogVisible: false,
      tableInfo: {
        list: [],
        columns: [
          {
            title: '是否设置',
            width: 80,
            render: (h, { row }) => {
              return <el-checkbox v-model={row.selected}></el-checkbox>
            }
          },
          {
            title: '分类资质类型',
            key: 'qualificationTypeName'
          },
          {
            title: '是否必填',
            render: (h, { row }) => {
              return <el-radio-group
                v-model={row.mustHave}
                disabled={!row.selected}
              >
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            }
          },
          {
            title: '潜在商品是否必填',
            render: (h, { row }) => {
              return <el-radio-group
                v-model={row.potentialMustHave}
                disabled={!row.selected}
              >
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            }
          }
        ],
      },
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    },
    dataSource: {
      immediate: true,
      deep: true,
      handler (list) {
        if (!this.isEmptyForCurrentList(list)) { this.setTableData(list); }
      }
    }
  },
  methods: {
    // 数据为空
    isEmptyForCurrentList (list = this.tableInfo.list) {
      return list.length === 0;
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false);
    },
    // 确定
    handleOk () {
      const pickValKeys = [
        'mustHave',
        'qualificationTypeName',
        'qualificationTypeNo',
        'relType',
        'selected',
        'potentialMustHave'
      ]
      this.$emit('getQualificationInfo', {
        listQualificationTypes: this.tableInfo.list.map(item => _.pick(item, pickValKeys)),
        listQualificationNames: this.getNamesByIsSelected()
      });
      this.handleClose();
    },
    // 获取名称集合，”是“的需要标明
    getNamesByIsSelected () {
      const names = this.tableInfo.list
        .filter(item => item.selected)
        .map(item => getQualificationTypeName(item))
        .join(';')
      return names
    },
    // 设置表格数据
    setTableData (list) {
      this.tableInfo.list = _.cloneDeep(list);
    }
  }
}
</script>
